<!--
 * @Descripttion: GGB
 * @version: 1.0
 * @Author: GGB
 * @Date: 2021-12-07 17:34:53
 * @LastEditors: GGB
 * @LastEditTime: 2021-12-08 07:35:35
-->
<template>
  <div class="main">
    <!-- 左侧菜单栏 -->
    <div class="menu">
      <span
        @click="handle(category)"
        v-for="category in categories.data"
        :key="category.id"
        :class="[activeId == category.id ? 'active' : '', 'menu-item']"
      >
        {{ category.title }}
      </span>
      <el-icon class="up" :size="size" @click="up">
        <arrow-up />
      </el-icon>
    </div>

    <!-- 内容部分 -->
    <div class="content">
      <div class="product-item" @click="handleProduct(product)" v-for="(product, index) in products.data" :key="index">
        <el-image
          style="width: 180px; height: 180px; flex-shrink: 1"
          fit="cover"
          :src="product.pict_url + '_270x270xzq90.jpg_.webp'"
        />
        <div class="right">
          <div class="title">{{ product.title }}</div>
          <div class="price">
            <span class="origin">原价:59 </span>
            <span class="after">券后价: 39.00</span>
          </div>
          <div class="info">{{ product.volume }} · 人已购买</div>
          <el-button type="warning" @click.stop="handleCoupon(product)" class="discovery-buy-btn">领券购买</el-button>
        </div>
      </div>
    </div>
    <!-- 广告部分 -->
    <div class="ad">
      <el-carousel trigger="click" class="ad-box">
        <el-carousel-item v-for="item in 4" :key="item">
          <el-image
            class="img"
            fit="cover"
            src="https://gw.alicdn.com/bao/uploaded/i3/2458110253/O1CN015VpFNb1DjuvdDyARU_!!0-item_pic.jpg_270x270xzq90.jpg_.webp"
          />
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<script setup>
import Element from '@/components/Element.vue'
import I18n from '@/components/I18n.vue'
import { ArrowUp } from '@element-plus/icons'
const activeId = ref('')
const loading = ref(false)
const { data: categories } = await useFetch('https://api.sunofbeach.net/shop/discovery/categories')
const { data: products } = await useFetch(`https://api.sunofbeach.net/shop/discovery/9660/1`)
console.log(products.value.data)
const up = () =>
  window.scrollTo({
    top: 0,
    behavior: 'smooth',
  })
</script>


<style lang="scss" scope>
.main {
  width: 1140px;
  // overflow-y: auto;
  min-height: 80vh;
  margin: 0 auto;
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  position: relative;

  .menu {
    position: -webkit-sticky;
    position: sticky;
    top: 10px;
    box-shadow: 0 5px 10px #d4d4d4;
    display: flex;
    margin-left: 5px;
    flex-direction: column;
    .up {
      margin: 0 auto;
      margin-bottom: -30px;
      margin-top: 14px;
      cursor: pointer;
    }
    .menu-item {
      width: 105px;
      height: 40px;
      line-height: 40px;

      list-style: none;
      cursor: pointer;
      text-align: center;
      &:hover {
        color: #fff;
        background: #ff4500;
      }
    }
    .active {
      color: #fff;
      background: #ff4500;
    }
  }
  .content::-webkit-scrollbar {
    display: none; /*隐藏滚动条*/
  }
  .content {
    width: 710px;
    height: 100%;
    margin-left: 30px;
    margin-right: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    // overflow-y: auto;
    padding: 0 10px;

    .product-item {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      padding: 10px;
      background: #fff;
      box-shadow: 0 5px 10px #d4d4d4;
      margin-bottom: 15px;

      .right {
        margin-left: 10px;
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        .title {
          cursor: pointer;
          max-width: 500px;
          font-weight: 600;
          font-size: 22px;
          color: #47494e;
        }
        .price {
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: flex-start;
          font-weight: 600;
          margin-top: 10px;
          margin-bottom: 10px;
          font-size: 16px;
          .origin {
            color: #999;
          }
          .after {
            color: #ff4500;
          }
        }
        .info {
          margin-top: 10px;
          margin-bottom: 10px;
          font-size: 16px;
        }
        .discovery-buy-btn {
          text-decoration: none;
          padding: 8px 20px;
          border-radius: 5px;
          align-self: flex-end;
          background-color: #f56c6c;
          border-color: #f56c6c;
          color: #fff;
        }
      }
    }
  }

  .ad {
    position: -webkit-sticky;
    position: sticky;
    top: 10px;
    .ad-box {
      box-shadow: 0 5px 10px #d4d4d4;
      width: 270px;
      margin-right: 5px;
    }
  }
}
.el-carousel__container {
  height: 270px;
  width: 270px;
}
</style>

